<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
   <!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- Favicon -->
   <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
   <!-- Typography CSS -->
   <link rel="stylesheet" th:href="@{/css/typography.css}">
   <!-- Style CSS -->
   <link rel="stylesheet" th:href="@{/css/style.css}">
   <!-- Responsive CSS -->
   <link rel="stylesheet" th:href="@{/css/responsive.css}">
   <!-- 引入element样式 -->
   <!--      <link rel="stylesheet" th:href="@{/css/https_unpkg.com_element-ui_lib_theme-chalk_index.css}">-->

</head>
<body>
   <!-- loader Start -->
   <div id="loading">
      <div id="loading-center">
      </div>
   </div>
   <!-- loader END -->
   <!-- Wrapper Start -->
   <div class="wrapper">
   <!-- Sidebar  引入公共列表-->
   <div th:include="public::list" class="iq-sidebar"></div>
         <!-- Responsive Breadcrumb End-->
      <!-- Page Content  -->
      <div id="content-page" class="content-page">
         <!-- TOP Nav Bar  引入公共头部-->
         <div th:include="public::top" class="iq-top-navbar"></div>
            <!-- TOP Nav Bar END -->
            <div class="container-fluid" id="content">
               <div class="row">
                  <div class="col-sm-12 col-lg-12">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">新增志愿者</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <div class="row">
                              <div class="col-md-3">
                                    <!--  fixme: 此处头像和其他数据一起上传不知如何实现                               -->
<!--                                 <form th:action="@{/admin/upload}" id="imgForm" method="post" enctype="multipart/form-data">-->
                                    <div class="form-group">
                                       <div class="add-img-user profile-img-edit">
                                          <img v-if="user.userImg == null" id="myImg" class="profile-pic img-fluid" style="width: 100px;height: 100px" src="../images/user/11.png" alt="profile-pic">
                                          <div class="p-image">
<!--                                             <a href="#" class="upload-button btn iq-bg-primary">File Upload</a>-->
                                             <input type="file" id="headPic" onchange="showImg(this)" class="btn btn-outline-primary rounded-pill mb-3"/>
                                          </div>
                                       </div>
                                       <div class="img-extension mt-3">
                                          <div class="d-inline-block align-items-center">
                                             <span>Only</span>
                                             <a href="#">.jpg</a>
                                             <a href="#">.png</a>
                                             <a href="#">.jpeg</a>
                                             <span>allowed</span>
                                          </div>
                                       </div>
                                    </div>
<!--                                 </form>-->
                              </div>
                              <div class="col-md-9">
                                 <div id="form-wizard3" class="text-center">
                                    <!-- fieldsets -->
                                    <fieldset>
                                       <div class="form-card text-left">
                                          <div class="row">
                                             <div class="col-12">
                                                <h3 class="mb-4">账号信息</h3>
                                             </div>
                                          </div>
                                          <div class="row">
                                             <div class="col-md-12">
                                                <div class="form-group">
                                                   <label for="fname">用户名*: </label>
                                                   <input v-model="user.username" type="text" class="form-control" id="fname" name="fname" placeholder="username" required="required" />
                                                </div>
                                             </div>
                                             <div class="col-md-12">
                                                <div class="form-group">
                                                   <label for="lname">密码*: </label>
                                                   <input v-model="user.password" type="text" class="form-control" id="lname" name="lname" placeholder="password" />
                                                </div>
                                             </div>
                                             <div class="col-md-12">
                                                <div class="form-group">
                                                   <label>角色*: </label>
                                                   <div class="form-check">
                                                      <div class="custom-control custom-radio custom-control-inline">
                                                         <input v-model="user.roleId" type="radio" id="customRadio1" name="customRadio" class="custom-control-input" value="2">
                                                         <label class="custom-control-label" for="customRadio1"> 志愿者</label>
                                                      </div>
                                                      <div class="custom-control custom-radio custom-control-inline">
                                                         <input v-model="user.roleId" type="radio" id="customRadio2" name="customRadio" class="custom-control-input" value="3">
                                                         <label class="custom-control-label" for="customRadio2"> 党员志愿者</label>
                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                             <div class="col-md-12">
                                                <div class="form-group">
                                                   <label>状态*: </label>
                                                   <div class="form-check">
                                                      <div class="custom-control custom-radio custom-control-inline">
                                                         <input v-model="user.state" type="radio" id="customRadio3" name="customRadio1" class="custom-control-input" value="0">
                                                         <label class="custom-control-label" for="customRadio3"> 禁用</label>
                                                      </div>
                                                      <div class="custom-control custom-radio custom-control-inline">
                                                         <input v-model="user.state" type="radio" id="customRadio4" name="customRadio1" class="custom-control-input" value="1">
                                                         <label class="custom-control-label" for="customRadio4"> 启用</label>
                                                      </div>
                                                   </div>
                                                </div>
                                             </div>

                                          </div>
                                       </div>

                                       <div class="form-card text-left">
                                          <div class="row">
                                             <div class="col-12">
                                                <h3 class="mb-4">用户信息*:</h3>
                                             </div>
                                          </div>
                                          <div class="row">
                                             <div class="col-md-12">
                                                <div class="form-group">
                                                   <label for="email">姓名*: </label>
                                                   <input v-model="user.userInfo.name" type="email" class="form-control" id="email" name="email" placeholder="name" />
                                                </div>
                                             </div>
                                             <div class="col-md-12">
                                                <div class="form-group">
                                                   <label for="ccno">电话号码*: </label>
                                                   <input v-model="user.userInfo.phone" type="text" class="form-control" id="ccno" name="ccno" placeholder="phone" />
                                                </div>
                                             </div>
                                             <div class="col-md-12">
                                                <div class="form-group">
                                                   <label for="city">特长: </label>
                                                   <input v-model="user.userInfo.spec" type="text" class="form-control" id="city" name="city" placeholder="spac" />
                                                </div>
                                             </div>
                                             <div class="col-md-12">
                                                <div class="form-group">
                                                   <label>性别*: </label>
                                                   <div class="form-check">
                                                      <div class="custom-control custom-radio custom-control-inline">
                                                         <input v-model="user.userInfo.sex" type="radio" id="6" name="customRadio3" class="custom-control-input" value="1">
                                                         <label class="custom-control-label" for="6"> 男</label>
                                                      </div>
                                                      <div class="custom-control custom-radio custom-control-inline">
                                                         <input v-model="user.userInfo.sex" type="radio" id="7" name="customRadio3" class="custom-control-input" value="0">
                                                         <label class="custom-control-label" for="7"> 女</label>
                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <button @click="addUser()" type="button" class="btn btn-primary next action-button float-right">提交</button>
                                    </fieldset>

                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         <!-- Footer  引入公共尾部-->
         <footer th:include="public::footer" class="bg-white iq-footer"></footer>
            <!-- Footer END -->
         </div>
      </div>
   <!-- Wrapper END -->
   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script th:src="@{/js/jquery.min.js}"></script>
   <script th:src="@{/js/popper.min.js}"></script>
   <script th:src="@{/js/bootstrap.min.js}"></script>
   <!-- Appear JavaScript -->
   <script th:src="@{/js/jquery.appear.js}"></script>
   <!-- Countdown JavaScript -->
   <script th:src="@{/js/countdown.min.js}"></script>
   <!-- Counterup JavaScript -->
   <script th:src="@{/js/waypoints.min.js}"></script>
   <script th:src="@{/js/jquery.counterup.min.js}"></script>
   <!-- Wow JavaScript -->
   <script th:src="@{/js/wow.min.js}"></script>
   <!-- Apexcharts JavaScript -->
   <script th:src="@{/js/apexcharts.js}"></script>
   <!-- Slick JavaScript -->
   <script th:src="@{/js/slick.min.js}"></script>
   <!-- Select2 JavaScript -->
   <script th:src="@{/js/select2.min.js}"></script>
   <!-- Owl Carousel JavaScript -->
   <script th:src="@{/js/owl.carousel.min.js}"></script>
   <!-- Magnific Popup JavaScript -->
   <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
   <!-- Smooth Scrollbar JavaScript -->
   <script th:src="@{/js/smooth-scrollbar.js}"></script>
   <!-- lottie JavaScript -->
   <script th:src="@{/js/lottie.js}"></script>
   <!-- Chart Custom JavaScript -->
   <script th:src="@{/js/chart-custom.js}"></script>
   <!-- Custom JavaScript -->
   <script th:src="@{/js/custom.js}"></script>


   <!--      <script th:src="@{/js/vue.js}"></script>-->
   <!--      &lt;!&ndash; 引入element组件库 &ndash;&gt;-->
   <!--      <script type="module" th:src="@{/js/https_unpkg.com_element-ui_lib_index.js}"></script>-->
   <!-- import Vue before Element -->
   <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
   <!-- import JavaScript -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script th:src="@{/js/axio.js}"></script>
   <!-- fixme: 编写时不注掉会导致自动生成大括号时生成错误     -->
   <script th:inline="javascript"> let rootUrl = [[@{/}]]; </script>


   <script>
      new Vue({
         el: "#content",
         data: {
            user: {
               userInfo:{}
            },   // 新用户的用户信息存放处

         },
         mounted(){

         },
         methods: {
            getList(pageNum) {
               // 发送ajax请求，尝试登录
               let url = rootUrl + `admin/getUserList?pageNum=${pageNum}&pageSize=${this.pageSize}`;
               url = url + '&roleId=' + this.roleId + '&searchInfo=' + this.searchTip;
               console.log(url);
               axios.post(url)
                       .then(response => {
                          let data = response.data;
                          if (data.code !== 0) return;
                          let pageInfo = data.data;
                          this.pageNum = pageInfo.pageNum;
                          this.pageSize = pageInfo.pageSize;
                          this.pages = pageInfo.pages;
                          this.total = pageInfo.total;
                          this.list = pageInfo.list;
                       })
                       .catch(error => {
                          alert(error);
                       });
            },
            addUser(){
               console.log(this.user);
               if (this.user.username===undefined||this.user.password===undefined||this.user.roleId===undefined||
                       this.user.state===undefined||this.user.userInfo.name===undefined||
                       this.user.userInfo.phone===undefined||this.user.userInfo.sex===undefined){
                  this.open4('添加用户数据时用户必要数据不能为空！');
                  console.log("asdasidhiah");
                  return;
               }
               let formData = new FormData();
               formData.append("username",this.user.username);
               formData.append("password",this.user.password);
               formData.append("roleId",this.user.roleId);
               formData.append("state",this.user.state);
               formData.append("userInfo.name",this.user.userInfo.name);
               formData.append("userInfo.phone",this.user.userInfo.phone);
               formData.append("userInfo.spec",this.user.userInfo.spec);
               formData.append("userInfo.sex",this.user.userInfo.sex);
               formData.append("headPic",document.getElementById("headPic").files[0]);
               let url = rootUrl + `admin/addUser`;
               axios.post(url,formData)
                       .then(response => {
                          let data = response.data;
                          if (data.code !== 0) return;
                          console.log('添加成功：'+data.code);
                          this.open2('添加成功');

                       })
                       .catch(error => {
                          alert(error);
                       });

            },
            putImg(img){

            },
            open1(msg) {
               this.$message({
                  showClose: true,
                  message: msg
               });
            }, // 提示
            open2(msg) {
               this.$message({
                  showClose: true,
                  message: msg,
                  type: 'success'
               });
            }, // 成功
            open3(msg) {
               this.$message({
                  showClose: true,
                  message: msg,
                  type: 'warning'
               });
            }, // 警告
            open4(msg) {
               this.$message({
                  showClose: true,
                  message: msg,
                  type: 'error'
               });
            }, // 错误



         }
      });

   </script>
   <script type="text/javascript">
      function showImg(a) {
         var imgFile = a.files[0];
         var src = window.URL.createObjectURL(imgFile);
         document.getElementById("myImg").setAttribute("src",src);
      }
   </script>
   </body>
</html>